<template>
	<view>
		<view class="baoxiu_t">
			<view class="noc" @click="sx('noc')">未处理</view>
			<view class="cing" @click="sx('cing')">处理中</view>
			<view class="ced" @click="sx('ced')">已处理</view>
			<view @click="sx('all')">全部</view>
		</view>
		<view class="content">
			<view v-for="(item,index) in itts" :key="index">
				<view>
					<view :class="item.class">{{item.classt}}</view>
					<view>{{item.title}}</view>
				</view>
				<view>
					{{item.date}}
				</view>
			</view>
		</view>
		<view class="addbx" >
			<view @click="add">
				<view>+</view>
				<view>增加</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { reactive,toRefs} from 'vue'
	import http from '../../../utils/http.js'
	import store from '../../../store/index.js'
	export default {
		setup(){
			let data = reactive({
				items:[],
				itts:[],
				sx:(e)=>{
					switch(e){
						case 'noc':data.itts=data.items.filter(item => item.classt=='未处理');break;
						case 'cing':data.itts=data.items.filter(item => item.classt=='处理中');break;
						case 'ced':data.itts=data.items.filter(item => item.classt=='已处理');break;
						case 'all':data.itts=data.items;break;
					}
				},
				add:()=>{
					uni.navigateTo({
						url: '/pages/wxz/addbaoxiu/addbaoxiu'
					});
				}
			})
			return {...toRefs(data)}
		},
		onShow() {
			this.items=[]
			http({
				url:'/users/bxSel',
				method:'post',
				data:{
					name:store.getters.getUser.guanli_hymc
				}
			}).then((e)=>{
				let data = e.data.data
				for(let i=0;i<data.length;i++){
					this.items.push({
						class:data[i].repair_zt=='未处理'?'noc':(data[i].repair_zt=='处理中'?'cing':'ced'),
						classt:data[i].repair_zt,
						title:data[i].msg,
						date:data[i].repair_rq
					})
				}
				this.itts=this.items
			})
		}
	}
</script>

<style scoped lang="less">
.baoxiu_t{
	display: flex;
	justify-content: center;
	color: white;
	padding: 20rpx 0;
	border-bottom: 1px solid #d9d9d9;
	view{
		margin: 0rpx 10rpx;
		width: 75rpx;
		text-align: center;
		font-size: 25rpx;
		padding: 5rpx 20rpx;
		border-radius: 10rpx;
	}
	view:last-child{
		background-color: #1890FF;
	}
}
.noc,.ced,.cing{
	color: white;
	margin: 0rpx 10rpx;
	width: 75rpx;
	height: 30rpx;
	line-height: 30rpx;
	text-align: center;
	font-size: 25rpx;
	padding: 5rpx 20rpx;
	border-radius: 10rpx;
}
.noc{
	background-color: #F5222D;
}
.cing{
	background-color: #40A9FF;
}
.ced{
	background-color: #73D13D;
}
.content{
	>view{
		display: flex;
		padding: 30rpx;
		border-bottom: 1px solid #d9d9d9;
		justify-content: space-between;
		>view{
			display: flex;
		}
	}
}
.addbx{
	position: relative;
	margin-top: 30rpx;
	>view{
		position: absolute;
		right: 10rpx;
		text-align: center;
		width: 120rpx;
		border-radius: 50%;
		height: 120rpx;
		background-color: #40A9FF;
		border: 1px solid black;
		color: white;
		>view:first-child{
			margin: 15rpx 0 -2rpx 0;
		}
	}
}
</style>
